<template>
	<view class="learn_con">
		<view class="learn_video">
			<view class="learn_top" v-for="(item,index) in videoList" >
				<video class="learn_img" :src='item.videoUrl' :poster="item.videoPic">
					<cover-view @click="pay(item.videoUrl,item.videoPic)"></cover-view>
				</video>
				<text class="learn_text">{{item.title}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {video} from "../../api/video.js"
	export default{
		data(){
			return{
				num:0,
				videoList:[]
			}
		},
		onLoad() {
			this.getData()
		},
		onReachBottom() {
			this.getData()
		},
		methods:{
			getData(){
				this.num ++
				this.get(video,{pageNum:this.num,pageSize:10}).then((res) => {
					console.log(res)
					res.data.list.forEach(item=>{
						item.ispay=false
						this.videoList.push(item)
					})
				})
			},
			pay(url,img){
				console.log(url)
				uni.navigateTo({
					url:"/pages/user/videoPay?url="+url+"&img="+img
				})
			}
		}
	}
</script>

<style>
	.learn_con{
		padding-left: 30rpx;
		padding-right: 30rpx;
	}
	.learn_video{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.learn_top{
		width: 330rpx;
		height: 328rpx;
	}
	.learn_play{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	cover-view{
		width: 330rpx;
		height: 241rpx;
		border-radius: 8rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 99999999999999;
	}
	.learn_img{
		width: 330rpx;
		height: 241rpx;
		background: #000000;
		border-radius: 8rpx;
		position: relative;
	}
	.learn_text{
		display: inline-block;
		height: 87rpx;
		line-height: 87rpx;
	}
</style>
